<!-- 图片轮播面板 -->
<template>
  <div class="image-panel-wrap" v-if="props.visible">
    <div class="image-panel-bg" @click="closeImagePanel"></div>
    <div class="image-panel">
      <div class="close" @click="closeImagePanel">
        <el-icon size="24"><CircleClose /></el-icon>
      </div>
      <div class="arrow left-arrow">
        <el-icon size="18" color="#fff" @click="showPrevImage"><ArrowLeft /></el-icon>
      </div>
      <div class="arrow right-arrow">
        <el-icon size="18" color="#fff" @click="showNextImage"><ArrowRight /></el-icon>
      </div>
      <div class="cur-img"  @mouseover="showImgTools" @mouseleave="hideImgTools">

        <el-image :src="curImg" fit="cover"/>
        <div class="img-tools" v-if="imgToolsVisible" @click="insertImgToEditor">
          <div class="img-tools_icon">
            <el-icon color="white" size="12"><CopyDocument /></el-icon>
          </div>
          <div class="txt">复制</div>
        </div>
      </div>
      <div class="img-list">
        <div :class="['img-item',curIndex===index ? 'active':'']" v-for="(item,index) in imageList" :key="index">
          <el-image  :src="item" fit="cover" @click="showThisImage(index)"/>
        </div>
      </div>
    </div>
  </div>
  
</template>
<script setup>
import { ref,onMounted,computed } from 'vue'
import { CircleClose,ArrowLeft,ArrowRight,CopyDocument } from '@element-plus/icons-vue'
const emit = defineEmits(['update:visible','insertImgToEditor'])
const props = defineProps({
  // 图片轮播数据
  imageList: {
    type: Array,
    default: () => []
  },
  visible:{
    type: Boolean,
    default: true
  }
})
const curIndex = ref(0)
const imgToolsVisible = ref(false)
const curImg = computed(()=>{
  return props.imageList[curIndex.value]
})
function showImgTools(){
  imgToolsVisible.value = true
}
function hideImgTools(){
  imgToolsVisible.value = false
}
function insertImgToEditor(){
  emit('insertImgToEditor',curImg.value)
}
function closeImagePanel(){
  emit('update:visible',false)
}
function showThisImage(index){
  curIndex.value = index
}
function showPrevImage(){
  curIndex.value--
  if(curIndex.value<0){
    curIndex.value = props.imageList.length-1
  }
  scrollTheImageIntoView()
}
function showNextImage(){
  curIndex.value++
  if(curIndex.value>=props.imageList.length){
    curIndex.value = 0
  }
  scrollTheImageIntoView()
}
function scrollTheImageIntoView(){
  let imgList = document.querySelectorAll('.img-item')
  let target = imgList[curIndex.value]
  target.scrollIntoView({
    behavior: 'smooth',
    block: 'nearest',
    inline: 'nearest'
  })
  console.log('imgList:',imgList)
}
onMounted(()=>{
  // console.log('props.visible:',props)
})
</script>
<style lang="scss" scoped>
.image-panel-wrap{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1000
}
.image-panel-bg{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 1000
}
.image-panel{
  width: 600px;
  height: 504px;
  background: #FFFFFF;
  box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
  border-radius: 20px;
  padding:40px 10px 20px;
  position: fixed;
  top: 50%;
  left:50%;
  transform: translate(-50%,-50%);
  z-index: 1000;
  .close{
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
  }
  .arrow{
    position: absolute;
    top:50%;
    transform: translateY(-50%);
    width: 26px;
    height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
    border-radius: 20px;
    background-color: #605AE5;
    &.left-arrow{
      left: 20px;
    }
    &.right-arrow{
      right: 20px;
    }
  }
  .el-image{
    width: 100%;
    height: 100%;
  }
  .cur-img{
    width: 258px;
    height: 344px;
    margin:auto;
    border-radius: 15px;
    overflow: hidden;
    position: relative;
    .img-tools{
      position: absolute;
      top:10px;
      right:10px;
      background: #FFFFFF;
      box-shadow: 0px 0px 10px 0px rgba(0,0,0,0.2);
      border-radius: 5px;
      display: flex;
      align-items: center;
      padding:4px 8px;
      .img-tools_icon{
        width: 16px;
        height: 16px;
        border-radius: 20px;
        background-color: #605AE5;
        display: flex;
        align-items: center;
        justify-content: center;
        padding:2px;
      }
      .txt{
        color:#333;
        margin-left: 5px;
        font-weight: bolder;
        font-size: 12px;
      }
    }
  }
  .img-list{
    margin-top: 10px;
    width:100%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 10px;
    &::-webkit-scrollbar {
      width: 4px;
      height: 4px;
    }
    &::-webkit-scrollbar-thumb {
      background: #ccc; // 滑块颜色
      border-radius: 5px; // 滑块圆角
    }
    .img-item{
      width: 70px;
      height: 90px;
      border-radius: 15px;
      margin-right: 10px;
      overflow: hidden;
      background: #FFFFFF;
      flex-shrink: 0;
      &.active{
        border: 2px solid #605AE5;
      }
      &:last-child{
        margin-right: 0px;
      }
    }
  }

}
</style>